<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/louceng.css">
    <title>Document</title>

</head>
<body>
    <!-- 模拟页面的吸顶部分 -->
    <div class="searchTop">
        <a href="./sosuo.html"></a>
        搜索：<input class="sou" type="text" placeholder="你想要的这里都有">
    </div>

    <!-- 侧边栏内容部分 应该和楼层内容对应 多一个 返回顶部-->
    <div class="storeNav">
        <ul>
            <li name="li" class="active">秒杀区域</li>
            <li name="li">年货节</li>
            <li name="li">每日特价</li>
            <li name="li">发现好货</li>
            <li name="li">新品首发</li>
            <li name="li">频道广场</li>
            <li name="li">为你推荐</li>
            <li name="back">返回顶部</li>
        </ul>
    </div>

    <!-- 模拟页面的具体内容部分 -->
    <div class="container">
        <!-- 页面的头部部分,不参与页面导航 -->
        <div class="header">
            <div class="nav">
                <div class="logo">
                    <span class="logo-img"><img src="./images/logo.jpg" alt="">
                    </span><span class="logo-zi">京京易购</span>
                </div>
                <div class="deng-an">
                    <button name="zhuce" class="btn-tc" role="button">注册</button>
                    <button name="go" class="btn-tc" role="button">登录</button>
                    <button name="logout" class="btn-tc" role="button">退出登录</button>
                    <button name="cart" class="btn-gwc" role="button">购物车</button>
                </div>
            </div>
            <div class="search">
                <a href="./sosuo.html"></a>
                搜索：<input class="sou" type="text" placeholder="你想要的这里都有">
            </div>
            <div class="banner">
                 <!-- 轮播图 -->
                <div class="banner1">
                  <ul class="clear"></ul>
                  <ol></ol>
                  <div>
                      <a href="JavaScript:;" name="left">&lt;</a>
                      <a href="JavaScript:;" name="right">&gt;</a>
                  </div>
                </div>
        
                <!-- js方法携带参数 -->
                <div class="dh-yi">
                    <p><a name="1" style="color: black;" class="btn btn-primary btn-lg" href="JavaScript:;" role="button">食品酒水</a></p>
                    <p><a name="1" style="color: black;"  class="btn btn-primary btn-lg" href="JavaScript:;" role="button">童装玩具</a></p>
                    <p><a name="1" style="color: black;"  class="btn btn-primary btn-lg" href="JavaScript:;" role="button">家装建材</a></p>
                    <p><a name="1" style="color: black;"  class="btn btn-primary btn-lg" href="JavaScript:;" role="button">奶粉尿裤</a></p>
                    <p><a name="1" style="color: black;"  class="btn btn-primary btn-lg" href="./liebiaoye.html?cat_one_id=其他" role="button">其他</a></p>
                </div></div>
        </div>

        <!-- 楼层导航内容 -->
        <div class="storey">
            <ul>
                <li>
                    <h3>秒杀区域</h3>
                    <div>秒杀区域内容</div>
                </li>

                <li>
                    <h3>年货节</h3>
                    <div>年货节区域内容</div>
                </li>

                <li>
                    <h3>每日特价</h3>
                    <div>每日特价区域内容</div>
                </li>

                <li>
                    <h3>发现好货</h3>
                    <div>发现好货区域内容</div>
                </li>

                <li>
                    <h3>新品首发</h3>
                    <div>新品首发区域内容</div>
                </li>

                <li>
                    <h3>频道广场</h3>
                    <div>频道广场区域内容</div>
                </li>

                <li>
                    <h3>为你推荐</h3>
                    <div>为你推荐区域内容</div>
                </li>

            </ul>
        </div>

        <!-- ----------------------------------------------------楼层导航--------------------------------------------------------- -->
        <div class="footer">我是页面的底部内容</div>
    </div>
    <script src="./js/tools.js"></script>
    <script src="./js/banner.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/myAjax.js"></script>
    <script src="./js/cookie.js"></script>
    <script>
        $('[name="zhuce"]').click(function(){window.location.href = './zhuce.html'}); //注册
        $('[name="go"]').click(function(){window.location.href = './denglu.html'});    //登录
        //$('name="logout"').click(function(){window.location.href = './zhuce.html'});//退出登录
        $('[name="cart"]').click(function(){window.location.href = './gouwuche.html'});  //购物车
    </script>
    <script>
        // 浏览器滚动事件
        $(window).scroll(function(){
            // 实现 吸顶div和侧边栏div
            // 页面上卷高度 大于 设定数值
            if( $(window).scrollTop() > 500 ){
                // 吸顶div 下拉显示 
                $('.searchTop').slideDown();
                // 吸顶div弹性盒子
                $('.searchTop').css('display' , 'flex');
                // 侧边栏li 减现显示
                $('.storeNav').fadeIn();
            }else{
                // 页面上卷高度 不大于 设定高度
                // 吸顶div 上卷隐藏
                $('.searchTop').slideUp();
                // 侧边栏div 渐隐隐藏
                $('.storeNav').fadeOut();
            }

            // 侧边栏的样式
            // 循环遍历 所有的 楼层li标签

            // item 就是 楼层li标签 是JavaScript标签对象 $(item) 是 jQuery伪数组
            $('.storey li').each(function(key,item){
                

                // 判断方法2 上卷高度 + 视窗窗口高度 - 预留高度 > 楼层li距离html页面顶部间距
                if( $(window).scrollTop() + $(window).height() - 500 > $(item).offset().top ){
                    // 给 索引下标 相同的 侧边栏li 添加样式 其他的侧边栏li删除样式
                    $('.storeNav li')       // 所有的侧边栏li
                    .eq( key )              // 找 索引下标 和 当前 楼层li相同的 侧边栏li 索引下标 是 key 或者 $(item).index()
                    .addClass('active')     // 添加 class,active
                    .siblings()             // 找到 其他的 兄弟侧边栏li
                    .removeClass('active'); // 删除 class,active
                }  
            })
        })

        // 给侧边栏li添加点击事件
        $('.storeNav li').each(function(key,item){
            // 如果 点击的 是 返回顶部 li标签
            if( $(item).attr('name') === 'back' ){
                // 当前是 返回顶部 标签 
                // 点击时 页面 上卷高度 为 0
                $(item).click(function(){
                    $('html')   // 设定页面上卷高度 必须是 $('html')
                    .animate( {scrollTop : 0 } , 1000 , 'linear' );
                    // 通过 自定义动画函数 实现 效果是 运动完成的 
                    // 设定 页面上卷的数值 是 0
                })

            // 如果 点击的 是 其他侧边栏 li标签
            }else if( $(item).attr('name') === 'li' ){
                // 当前是 其他侧边栏li 标签 
                // 点击时 页面 上卷高度 为 侧边栏li 对应的 楼层li 距离html页面顶部 高度 - 预留高度
                $(item).click(function(){
                    // $('.storey li') 是 所有的 楼层li
                    // eq() 按照 侧边栏li的索引下标 查询对应的 楼层li
                    // .offset().top  获取 楼层li 距离 html页面顶部间距
                    // 在 减去 一个 预留高度
                    $('html').animate( {scrollTop : $('.storey li').eq( key ).offset().top - 200 } , 1000 , 'linear' );
                })
            }
        })

    </script>


    <!-- ----------------------------------------------------轮播图--------------------------------------------------------- -->


    <script>
        // 定义数组 模拟 数据库数据
        const imgArr = [
            {id:1,size:'2.3MB',width:1920,height:900,name:'01.gif'},
            {id:2,size:'164KB',width:1920,height:500,name:'02.jpeg'},
            {id:3,size:'201KB',width:900,height:372,name:'03.jpeg'},
            {id:4,size:'193KB',width:1920,height:660,name:'04.jpeg'},
            {id:5,size:'82KB',width:991,height:283,name:'05.jpeg'},
        ];

        // 获取标签对象 
        const oBanner = document.querySelector('.banner');

        // 面向对象编程
        // 调用构造函数 创建 轮播图 实例化对象
        const bannerObj = new setBanner( oBanner , imgArr );
        console.log( bannerObj );

        // 只需要调用一个 入口函数 init 就可以了
        // 效果 类似于 一键启动所有
        bannerObj.init();
    
    </script>
<!-- ----------------------------------------------------输入框入口--------------------------------------------------------- -->

<script>
    const oInps = document.querySelectorAll('input');
    oInps[0].addEventListener('click',function fun(){
        window.location.href = './sosuo.html'
    });
    oInps[1].addEventListener('click',function fun(){
        window.location.href = './sosuo.html'
    })
</script>
<!-- ---------------------------------------------------侧边栏入口--------------------------------------------------------- -->
<script>
    // 退出登录
    $('[name="logout"]').click(function () {
      // 先获取 cookie 对象
      const cookieObj = myGetCookie();

      if (cookieObj.login === "1") {
        // 证明已经登录

        // 设定 login存储的数值 是 0
        // mySetCookie( 'login' , 0 , 7*24*60*60 , '/' );

        // 设定 login的时效是 负数 直接就是 时效过期
        // 浏览器自动删除这个 cookie
        mySetCookie("login", 0, -1, "/");

        window.alert("您已经退出登录了");
      } else {
        // 还没有登录
        window.alert("您还没有登录,请您先登录");
      }
    });

    // 跳转购物车
    $('[name="cart"]').click(function () {
      // 获取 cookie对象
      const cookieObj = myGetCookie();

      if (cookieObj.login === "1") {
        // 已经登录 直接跳转 购物车页面
        window.location.href = "./gouwuche.html";
      } else {
        if (window.confirm("您还没有登录,点击确定跳转登录页面")) {
          window.location.href = "./denglu.html";
        }
      }
    });

    // 点击 商品分类页面
    // 跳转 商品列表页 同时 携带 商品分类参数
    // 点击 标签 跳转 列表页 同时 携带 参数
    // 键名是 cat_one_id 键值是 标签内容
    $('[name="1"]').click(function () {
      window.location.href = `./liebiaoye.html?cat_one_id=${$(this).html()}`;
    });
  </script>
       <!-- ----------------------------------------内容渲染区域------------------------------------------------ -->
</body>
</html>